<template>
  <!--// 设备卡片组件-->
  <div>
    <div class="imgPart">
        <img :src="icon" class="imgStyle" alt=""/>
    </div>
    <div class="textPart">
      <h3>{{enName}}</h3>
  </div>
  </div>
</template>
<script>
export default {
  name: 'SvgCard',
  props: ['name'],
  created: function () {
  },
  data: function () {
    return {
    }
  },
  watch: {
  },
  methods: {
    askPic: function (picUrl) {
      window.myapi.show_pic({ url: picUrl }).then(resp => {
        this.icon = 'data:image/png;base64,' + btoa(new Uint8Array(resp.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      }).catch(info => {
        this.$Notice.warning({
          title: '操作提示',
          desc: info
        })
      }).finally((fin) => {})
    }
  },
  computed: {
    icon () {
      return require('../../assets/icon/' + this.name.substr(0, this.name.indexOf('.svg')) + '.png')
    },
    enName () {
      let result = ''
      switch (this.name) {
        case 'Compressor.svg':
          result = '压缩机'
         break
        case 'ControlValve.svg':
          result = '控制阀'
         break
        case 'CoolingPump.svg':
          result = '冷却泵'
         break
        case 'CoolingTower.svg':
          result = '冷却塔'
         break
        case 'Flowmeter.svg':
          result = '流量计'
         break
        case 'GasContainer.svg':
          result = '储气罐'
         break
        default:
          break
      }

      return result
    }
  }
}

</script>
<style scoped>
.textPart {
  text-align: center;
  height: 15%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: solid 1px #e9e4e4;
}
.textPartInPool {
  text-align: center;
  height: 15%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: solid 1px #e9e4e4;
  background: #d1f7d6;
}
.imgPart {
  text-align: center;
  height: 85%;
  cursor: pointer;
}
.imgStyle {
  width: 50px;
  height: 50px;
}

</style>
